<script setup lang="ts">
import NavBar from './components/NavBar.vue'//标题bar
import SliderBar from './components/SliderBar.vue'//侧边栏
//首页模块

</script>

<template>
  <!-- 主要布局容器，包含侧边栏和主要内容区域 -->
  <div class="main-layout">
    <!-- 侧边栏容器，放置SliderBar组件 -->
    <SliderBar class="slider-container"></SliderBar>
    <!-- 主内容区域容器 -->
    <div class="main-container">
      <!-- 导航栏，放置NavBar组件 -->
      <NavBar></NavBar>
      <!-- 主要内容包装器，包含页面的主要内容 -->
      <div class="main-wrapper">
        <div class="main-content">
          <!-- 路由视图，用于渲染匹配的路由组件 -->
          <RouterView v-slot="{ Component }">
            <!-- 过渡动画，用于在路由切换时提供动画效果 -->
            <Transition name="fade-transform" mode="out-in">
              <!-- 动态组件，根据路由路径渲染对应的组件 -->
              <component :key="$route.path" :is="Component" />
            </Transition>
          </RouterView>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.main-layout {
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  overflow: hidden;
  .main-container {
    background-color: #f4f6f8;
    flex: 1;
    min-width: 820px;
    .main-wrapper {
      padding: 0 20px;
      .main-content {
        background-color: #ffffff;
        height: calc(100vh - 60px);
        overflow-y: auto;
      }
    }
  }
  .slider-container {
    width: 260px;
    min-width: 260px;
  }
}
</style>
